<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易手机通讯录</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .container {
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        textarea {
            width: 100%;
            height: 200px;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-family: monospace;
        }
        .button-group {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 5px 8px;
            margin: 2px 5px;
            cursor: pointer;
            font-size: 14px;
        }
        button:hover {
            background-color: #45a049;
        }
        #phone {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>简易手机通讯录</h1>

        <div class="form-group">
            <label for="name">姓名:</label>
            <input type="text" id="name" placeholder="请输入姓名">
        </div>

        <div class="form-group">
            <label for="phone">电话:</label>
            <input type="text" id="phone" placeholder="请输入电话">
        </div>

        <div class="button-group">
            <button id="add">添加</button>
            <button id="search">查询</button>
            <button id="delete">删除</button>
            <button id="reset">重置</button>
        </div>

        <label>通讯录列表:</label>
        <textarea id="contacts-list" readonly></textarea>
    </div>

    <script>
        $(document).ready(function() {
            // Initialize contacts from localStorage or create empty array
            let contacts = JSON.parse(localStorage.getItem('phoneContacts')) || [];

            // Update the contacts list display
            function updateContactsList() {
                let listContent = '';
                contacts.forEach(contact => {
                    listContent += `${contact.name}: ${contact.phone}\n`;
                });
                $('#contacts-list').val(listContent);
                // Save to localStorage
                localStorage.setItem('phoneContacts', JSON.stringify(contacts));
            }

            // Initial display of contacts
            updateContactsList();

            // Add contact
            $('#add').click(function() {
                const name = $('#name').val().trim();
                const phone = $('#phone').val().trim();

                if (!name || !phone) {
                    alert('姓名和电话不能为空！');
                    return;
                }

                // Check if name already exists
                const existingIndex = contacts.findIndex(c => c.name === name);
                if (existingIndex >= 0) {
                    if (confirm('该姓名已存在，是否更新电话？')) {
                        contacts[existingIndex].phone = phone;
                    }
                } else {
                    contacts.push({name, phone});
                }

                updateContactsList();
                $('#name').val('');
                $('#phone').val('');
            });

            // Search contact
            $('#search').click(function() {
                const name = $('#name').val().trim();
                if (!name) {
                    alert('请输入要查询的姓名！');
                    return;
                }

                const contact = contacts.find(c => c.name === name);
                if (contact) {
                    $('#phone').val(contact.phone);
                } else {
                    alert('未找到该联系人！');
                    $('#phone').val('');
                }
            });

            // Delete contact
            $('#delete').click(function() {
                const name = $('#name').val().trim();
                if (!name) {
                    alert('请输入要删除的姓名！');
                    return;
                }

                const initialLength = contacts.length;
                contacts = contacts.filter(c => c.name !== name);

                if (contacts.length === initialLength) {
                    alert('未找到该联系人！');
                } else {
                    updateContactsList();
                    $('#name').val('');
                    $('#phone').val('');
                    alert('联系人已删除！');
                }
            });

            // Reset form
            $('#reset').click(function() {
                $('#name').val('');
                $('#phone').val('');
            });
        });
    </script>
</body>
</html>